<template>
  <ul class="context-menu-container">
    <li @click="onRefresh">刷新</li>
    <li @click="onRemove">移除会话</li>
    <li @click="onClearMsg">清空聊天</li>
  </ul>
</template>

<script setup>
import { defineProps, computed } from 'vue';
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { binMsg } from '@/global/api.js';
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  friendId: {
    type: String,
    default: 0
  }
})

const router = useRouter()
const store = useStore()
const userInfo = computed(() => store.state.userModule.userInfo)

// 刷新
const onRefresh = () => {
  router.go(0)
}

// 移除好友
const onRemove = async () => {
  try {
    await ElMessageBox.confirm( '确定将该好友从会话列表移除吗？', '警告',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    })
    // 移除操作
    store.dispatch('friendModule/removef',{uid: userInfo.value.id, fid: props.friendId})
  }catch(e) {
    binMsg('info', '已取消')
  }
}

const onClearMsg = () => {
  binMsg('warning', '功能开发中')

}
</script>

<style lang="less" scoped>
.context-menu-container {
  position: fixed;
  background: #fff;
  z-index: 3000;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
    margin: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    &:hover {
      background: #eee;
    }
  }
}
</style>
